<template>
	<view>
		<view class="header">
			<view class="header-top">
				<span>*</span>
				<text>标题</text>
			</view>
			<textarea placeholder="请输入标题" placeholder-class="place" :value="title" @input="getTitle"></textarea>
		</view>
		<view class="xuanxiang">
			<view class="xxtitle">选项</view>
			<view class="xxmain">
				<view class="xxmain-item flex" v-for="(item,index) in array" :key="index">
					<view class="xxmain-item-left flex">
						<image :src="imgurl+'jianshao.png'" @tap="delInput(index)"></image>
						<input placeholder="输入选项" placeholder-class="placeholder" v-model="item.wen" @input='getInputVal' :data-index="index"
						 @blur='getIndex' />
					</view>
					<view class="xxmain-item-right flex">
						<image :src="item.img" @tap="choicePic(index)"></image>
						<!-- <text>...</text> -->
						<radio color="#209FFC" style="transform: scale(0.7);" :checked="item.xuan == 2 ? 'chencked' : ''" @tap="oneRadio($event,index)"></radio>
					</view>
				</view>
				<view class="add-item flex">
					<view class="xxmain-item-left flex" @tap="addInput">
						<image :src="imgurl+'tianjia.png'"></image>
						<text>添加选项</text>
					</view>
					<view class="xxmain-item-right" @tap="batchAdd">批量添加</view>
				</view>
				<!-- <view class="add-item flex">
					<view class="xxmain-item-left flex" @tap="addtextarea">
						<image :src="imgurl+'tianjia.png'"></image>
						<text>其他</text>
					</view>
				</view> -->
			</view>
		</view>
		<view class="set">
			<view class="set-title">设置</view>
			<view class="set-item flex">
				<text>切换至单选题</text>
				<switch @change="switch1Change" color="#209FFC" />
			</view>
			<view v-if="showXX">
				<view class="set-item flex">
					<text>最少选择</text>
					<view class="set-item-right flex">
						<picker @change="Least" :value="leastindex" :range="leastArray">
							<view class="picker">
								{{leastArray[leastindex]}}
							</view>
						</picker>
						<image :src="imgurl+'youjiantou.png'"></image>
					</view>
				</view>
				<view class="set-item flex">
					<text>最多选择</text>
					<view class="set-item-right flex">
						<picker @change="Most" :value="mostindex" :range="mostArray">
							<view class="picker">
								{{mostArray[mostindex]}}
							</view>
						</picker>
						<image :src="imgurl+'youjiantou.png'"></image>
					</view>
				</view>
			</view>
			<view class="set-item flex">
				<text>此题目必须回答</text>
				<switch @change="switch2Change" color="#209FFC" :checked="mustValue==1?false:true" />
			</view>
			<view class="set-item flex">
				<text>一行显示项数</text>
				<view class="set-item-right flex">
					<picker @change="bindPickerChange" :value="lineindex" :range="lineArray">
						<view class="picker">
							{{lineArray[lineindex]}}
						</view>
					</picker>
					<image :src="imgurl+'youjiantou.png'"></image>
				</view>
			</view>
			<view class="set-item-other flex" @tap="showSet" v-if="shoeset">
				<text>逻辑设置</text>
				<image :src="imgurl+'xiajiantou.png'"></image>
			</view>
			<view class="showset" v-else>
				<view class="set-item flex" @tap="showCondition">
					<text>显示条件</text>
					<view class="set-item-right flex">
						<text>未设置</text>
						<image :src="imgurl+'youjiantou.png'"></image>
					</view>
				</view>
				<view class="set-item flex" @tap="jumpQuestion">
					<text>跳题设置</text>
					<view class="set-item-right flex">
						<text>未设置</text>
						<image :src="imgurl+'youjiantou.png'"></image>
					</view>
				</view>
			</view>
		</view>
		<button class="buttoncss" @tap="save">确认</button>
	</view>
</template>

<script>
	import api from "@/common/api.js";
	import {
		baseURL
	} from "@/common/http.js";
	import app from "../../../App.vue"
	export default {
		data() {
			return {
				imgpic: "",
				imgurl: "",
				title: '',
				array: [{
					xuan: 1,
					img: app.globalData.imgurls + 'pic.png',
					wen: ''
				}, {
					xuan: 1,
					img: app.globalData.imgurls + 'pic.png',
					wen: ''
				}], //默认显示一
				inputVal: [], //所有input的内容
				showXX: true, //显示选择
				shoeset: true, //显示设置
				lineArray: ['1', '2', '下拉框'], //显示项数
				lineindex: 0,
				leastArray: ['不限'], //最少选择
				leastindex: 0,
				mostArray: ['不限'], //最多选择
				mostindex: 0,
				mustValue: 2, //是否必答
				pid: 2, //是否多选
				wenid: '',
				item: ''
			};
		},
		methods: {
			getTitle(e) {
				this.title = e.detail.value
			},
			//添加选项
			addInput() {
				this.array.push({
					xuan: 1,
					img: app.globalData.imgurls + 'pic.png',
					wen: ""
				})
				console.log(this.array)
			},
			//删除选项
			delInput(e) {
				var nowidx = e; //当前索引
				var oldInputVal = this.inputVal; //所有的input值
				var oldarr = this.array; //循环内容
				oldarr.splice(nowidx, 1); //删除当前索引的内容，这样就能删除view了
				oldInputVal.splice(nowidx, 1); //view删除了对应的input值也要删掉
				if (oldarr.length < 0) {
					oldarr = [0]
				}
				this.array = oldarr
				this.inputVal = oldInputVal
				this.leastArray = ['不限'] //最少选项
				this.mostArray = ['不限'] //最多选项
				this.inputVal.forEach((item, index) => {
					this.leastArray.push(index + 1)
					this.mostArray.push(index + 1)
				})
			},
			//获取input的值
			getInputVal(e) {
				var nowIdx = e.currentTarget.dataset.index; //获取当前索引
				var val = e.detail.value; //获取输入的值
				var oldVal = this.inputVal;
				oldVal[nowIdx] = val; //修改对应索引值的内容
			},
			//失去焦点
			getIndex(e) {
				this.leastArray = ['不限'] //最少选项
				this.mostArray = ['不限'] //最多选项
				this.inputVal.forEach((item, index) => {
					this.leastArray.push(index + 1)
					this.mostArray.push(index + 1)
				})
				console.log(this.leastArray)
			},
			//此项是否是正确答案
			oneRadio(e, index) {
				console.log(e, index)
				var ids = index
				let that = this
				if (this.showXX == false) {
					this.array.forEach((item, index) => {
						ids === index ? this.array[index].xuan = 2 : this.array[index].xuan = 1
					})
				} else {
					this.array[index].xuan == 1 ? this.array[index].xuan = 2 : this.array[index].xuan = 1
				}
				console.log(this.array)
			},
			//上传图片
			choicePic(index) {
				let ids = index
				let that = this
				this.array.forEach((item, index) => {
					if (ids === index) {
						uni.chooseImage({
							count: 1,
							sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
							sourceType: ['album'], //从相册选择
							success: function(res) {
								// that.array[index].img = res.tempFilePaths[0]
								uni.getFileSystemManager().readFile({
									filePath: res.tempFilePaths[0], //选择图片返回的相对路径
									encoding: 'base64', //编码格式
									success: res => { //成功的回调
										that.array[index].img = 'data:image/jpeg;base64,' + res.data //不加上这串字符，在页面无法显示
									}
								})
							}
						});
					}
				})

			},
			//批量添加
			batchAdd() {
				let that = this
				if(this.title != '') {
					this.$store.commit('setTiName', this.title)
					uni.navigateTo({
						url: "../batchAdd/batchAdd?type=" + '4' + "&wenid"
					})
				} else {
					uni.showToast({
						title: '请输入题目',
						icon: 'none',
						duration: 2000
					})
				}
			},
			//切换至单选题
			switch1Change(e) {
				if (e.target.value == true) {
					this.pid = 1
					this.showXX = true
				} else {
					this.showXX = false
					this.pid = 2
				}
			},
			//此题目是否必答
			switch2Change(e) {
				if (e.target.value == true) {
					this.mustValue = 2
				} else {
					this.mustValue = 1
				}
			},
			//逻辑设置显示
			showSet() {
				this.shoeset = false
			},
			//最少显示
			Least(e) {
				let that = this
				this.leastindex = e.target.value
				if (this.mostArray[this.mostindex] != "不限") {
					if (this.leastArray[this.leastindex] > this.mostArray[this.mostindex]) {
						uni.showModal({
							title: '',
							showCancel: false,
							confirmText: "知道了",
							confirmColor: 'skyblue',
							content: '最多项不能小于最小项',
							success: function(res) {
								if (res.confirm) {
									that.leastindex = 0
								}
							}
						});
					}
				}
			},
			//最多显示
			Most(e) {
				let that = this
				this.mostindex = e.target.value
				if (this.leastArray[this.leastindex] != "不限") {
					if (this.leastArray[this.leastindex] > this.mostArray[this.mostindex]) {
						uni.showModal({
							title: '',
							showCancel: false,
							confirmText: "知道了",
							confirmColor: 'skyblue',
							content: '最多项不能小于最小项',
							success: function(res) {
								if (res.confirm) {
									that.mostindex = 0
								}
							}
						});
					}
				}
			},
			//显示项数
			bindPickerChange(e) {
				this.index = e.target.value
			},
			//显示条件
			showCondition() {
				if (this.item > 1) {
					// uni.navigateTo({
					// 	url: "../condition/condition"
					// })
				} else {
					uni.showToast({
						title: "第一题不能设置显示条件",
						icon: "none",
						duration: 1000
					})
				}
			},
			//跳题设置
			jumpQuestion() {
				uni.showToast({
					title: "此题目为最后一题，不能跳题",
					icon: "none",
					duration: 1000
				})
			},
			save() {
				let arr = JSON.parse(JSON.stringify(this.array));
				arr.forEach(item => {
					if (item.img == "../../../static/images/pic.png") {
						item.img = ""
					}
					if (item.xuan == 2) {
						item.xuan = 2
					} else {
						item.xuan = 1
					}
				})
				if (this.title && this.title != '') {
					if (this.pid == 1) {
						var data = {
							api: 'wenti',
							wen: this.title,
							xuan: this.mustValue,
							wenid: this.wenid,
							data: arr,
							yan: this.lineArray[this.lineindex],
							orde: '',
							pid: this.pid
						}
					} else {
						zuiduo: this.mostArray[this.mostindex]
						var data = {
							api: 'wenti',
							wen: this.title,
							xuan: this.mustValue,
							wenid: this.wenid,
							data: arr,
							yan: this.lineArray[this.lineindex],
							orde: '',
							pid: this.pid,
							zuishao: this.leastArray[this.leastindex],
							zuiduo: this.mostArray[this.mostindex],
						}
					}
					let inputValSet = new Set(this.inputVal)
					let inputValSetArr = Array.from(inputValSet);
					if (this.inputVal.length < 2) {
						uni.showToast({
							title: "最少两个选项",
							icon: 'none'
						})

					}  else if (this.inputVal.length > inputValSetArr.length) {
						uni.showToast({
							title: "选项内容不可相同哦~",
							icon: 'none'
						})
					} else if (this.title == "") {
						uni.showToast({
							title: "题目不能为空",
							icon: 'none'
						})
					} else {
						api.add(data).then(res => {
							if (res.code == 200) {
								uni.navigateTo({
									url: '../../editDiaocha/editDiaocha?wenid=' + this.wenid
								})
							}
						}).catch(err => {
							console.log(err)
						})
					}
				} else {
					uni.showToast({
						icon: 'none',
						title: '标题为必填项，请先填写标题！',
						duration: 2000
					})
				}
			}
		},
		onShareAppMessage(options) {
			let shareObj = {
				success: (res) => {
					if (res.errMsg == 'shareAppMessage:ok') {
						uni.showToast({
							title: '分享成功',
							icon: 'success',
							duration: 1500
						})
					}
				},
				fail: () => {
					if (res.errMsg == 'shareAppMessage:fail cancel') {
						uni.showToast({
							title: '取消分享',
							icon: 'none',
							duration: 2000
						})
					} else if (res.errMsg == 'shareAppMessage:fail') {
						// 转发失败，其中 detail message 为详细失败信息
					}
				},
				complete: () => {
					// 转发结束之后的回调（转发成不成功都会执行）
				}
			}
		},
		onLoad(options) {
			let that = this
			if(options.type && options.type != '') {
				this.pid = JSON.parse(options.type)
			}
			if(options.wenid) {
				this.wenid = options.wenid
				that.$store.commit('setWenId', options.wenid)
			} else {
				this.wenid = this.$store.state.wenid
			}
			that.item = options.item
			this.imgurl = app.globalData.imgurls
			if (options.id) {
				let data = {
					api: 'wenudan',
					id: options.id
				}
				api.look(data).then(res => {
					if (res.code == 200) {
						res.date.da.map((item) => {
							if (item.xuan == 2) {
								item.xuan = 2
							} else {
								item.xuan = 1
							}
							if (item.img == "") {
								item.img = "../../../static/images/pic.png"
							}
							this.inputVal.push(item.wen)
							return item
						})
						this.title = res.date.ti
						this.array = res.date.da
					}
				}).catch(err => {
					console.log(err)
				})
			}
			this.leastArray = ['不限'] //最少选
			this.mostArray = ['不限'] //最少选项
			if (options.da) {
				this.title = this.$store.state.tiName
				let b = []
				let val = options.da.replace(/(\n)/g, ',')
				that.array = []
				b = val.split(",")
				b.forEach((item, index) => {
					that.array.push({
						xuan: 1,
						img: app.globalData.imgurls + 'pic.png',
						wen: item
					})
				})
				this.inputVal = this.inputVal.concat(b)
				this.inputVal.forEach((item, index) => {
					this.leastArray.push(index + 1)
					this.mostArray.push(index + 1)
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #F0F0F0;
		font-family: PingFang SC;
		// font-weight: 500;
	}

	.header {
		width: 100%;
		background: #fff;
		padding: 20rpx 0rpx;

		.header-top {
			width: 690rpx;
			margin: 0 auto;
			color: #333;
			font-size: 32rpx;

			span {
				color: #ff0000;
				margin-right: 10rpx;
			}
		}

		textarea {
			padding: 20rpx 0 0 30rpx;
			width: 690rpx;
			margin: 10rpx auto;
			box-sizing: border-box;
			height: 100rpx;
			border: 1rpx solid #DFDFDF;
			border-radius: 10rpx;
		}
	}

	.place {
		color: #999;
		font-weight: normal;
		font-size: 30rpx;
	}

	.xuanxiang {
		background: #fff;

		.xxtitle {
			width: 100%;
			height: 50rpx;
			line-height: 50rpx;
			padding-left: 30rpx;
			background: #F0F0F0;
			color: #999;
			font-size: 24rpx;
		}

		.xxmain {
			width: 690rpx;
			margin: 0 auto;

			.xxmain-item {
				height: 100rpx;
				border-bottom: 1rpx solid #DFDFDF;
				justify-content: space-between;

				.xxmain-item-left {
					width: 90%;
					height: 100rpx;

					input {
						width: 90%;
						height: 100rpx;
					}
				}

				.xxmain-item-right {
					height: 100rpx;
					line-height: 100rpx;

					text {
						display: inline-block;
						line-height: 80rpx;
						height: 100rpx;
					}
				}
			}

			image {
				width: 50rpx;
				height: 50rpx;
			}
		}
	}

	.add-item {
		height: 100rpx;
		border-bottom: 1rpx solid #DFDFDF;
		justify-content: space-between;

		.xxmain-item-left {
			width: 70%;
			height: 100rpx;

			text {
				width: 90%;
				height: 100rpx;
				line-height: 100rpx;
				display: inline-block;
				color: #209FFC;
				font-size: 30rpx;
			}
		}

		.xxmain-item-right {
			color: #209FFC;
			border: 1rpx solid #209FFC;
			padding: 10rpx 20rpx;
			border-radius: 25rpx;
			font-size: 24rpx;
		}
	}

	.set {
		background: #fff;

		.set-title {
			width: 100%;
			height: 50rpx;
			line-height: 50rpx;
			padding-left: 30rpx;
			background: #F0F0F0;
			color: #999;
			font-size: 24rpx;
		}

		.set-item {
			width: 690rpx;
			height: 100rpx;
			line-height: 100rpx;
			margin: 0 auto;
			justify-content: space-between;
			border-bottom: 1rpx solid #DFDFDF;

			.set-item-right {

				text {
					width: 400rpx;
					height: 100rpx;
					text-align: right;
					display: inline-block;
				}

				image {
					width: 45rpx;
					height: 50rpx;
				}
			}

			text {
				color: #333;
				font-size: 30rpx;
			}
		}

		.set-item-other {
			width: 690rpx;
			height: 100rpx;
			line-height: 100rpx;
			margin: 0 auto;
			justify-content: center;

			image {
				width: 40rpx;
				height: 25rpx;
				margin-left: 10rpx;
			}

		}
	}

	.buttoncss {
		width: 690rpx;
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
		color: #fff;
		font-size: 40rpx;
		border-radius: 50rpx;
		background: #209FFC;
		margin: 40rpx auto 20rpx;
	}

	.picker {
		width: 400rpx;
		height: 100rpx;
		line-height: 100rpx;
		text-align: right;
	}
</style>
